<template>
  <view class="distraction">
    <uni-list>
      <uni-list-item>
        <template slot="body">
          <view class="title">
            {{$t('印章名称')}}:
            <text class="text">{{ dataList.deviceName }}</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template slot="body">
          <view class="title">
            {{$t('拆章人')}}:
            <text class="text">{{ dataList.userName }}</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template slot="body">
          <view class="title">
            {{$t('加盖次数')}}:
            <text class="text">{{ dataList.useCount }}</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template slot="body">
          <view class="title">
            {{$t('拆章位置')}}:
            <text class="text">{{ dataList.location }}</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template slot="body">
          <view class="title">
            {{$t('拆章时间')}}:
            <text class="text">{{ dataList.realTime }}</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item v-if="dataList.fileEntity">
        <template slot="body">
          <view class="u-cell-group" @click="navigateTo(item)">
            <view class="title">{{$t('拆章图片')}}:</view>
            <u-image
              :src="dataList.fileEntity.fileUrl + '?Authorization=' + userInfo.token + '&us=app'"
              border-radius="10"
              class="item-image"
              height="150rpx"
              width="150rpx"
              @click="previewImage(dataList.fileEntity, index, $t('拆章图片'))"
            ></u-image>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <!-- 图片浏览 -->
    <lizhao-image-picture
      :isShow="Image.isShow"
      :showIndex="Image.showIndex"
      :swiperImages="Image.list"
      maxUrlId="fileId"
      src="fileUrl"
      @close="Image.isShow = false"
    ></lizhao-image-picture>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: mapGetters(['userInfo', 'api']),
  data() {
    return {
      noticeId: '',
      dataList: {},
      Image: {
        list: [],
        isShow: false,
        showIndex: 0
      }
    }
  },
  onLoad(option) {
    uni.setNavigationBarTitle({title: this.$t('印章拆卸')})
    this.noticeId = option.id
    //获取数据
    this.getDataList()
  },
  methods: {
    //获取数据
    getDataList() {
      this.$u
        .get(this.api.GLOBAL_device_disassemblyRecordInfo_getInfoByNoticeId, {
          noticeId: this.noticeId
        })
        .then((res) => {
          if (res.code === 200) {
            this.dataList = res.data
          }
        })
    },
    //浏览图片
    previewImage(row, index, title) {
      this.Image.list[0] = {
        title,
        ...row
      }
      this.Image.isShow = true
      this.Image.showIndex = index //显示图片第几个
    }
  }
}
</script>

<style lang="scss" scoped>
.distraction {
  width: 750upx;
  height: 100%;

  .title {
    color: #000000;
    font-size: 14px;

    .text {
      color: #888;
      margin-left: 5px;
    }
  }
}
</style>
